<template>
  <div ref="chart" :style="{'width':width,'height': height}" class="candlestick-chart"/>
</template>

<script>
import * as echarts from 'echarts'
import resize from "@/views/dashboard/mixins/resize";

require('echarts/theme/macarons')

export default {
  name: 'CandlestickChart',
  mixins: [resize],
  props: {
    // chartDOM宽度
    width: {
      type: String,
      default: '100%'
    },
    // chartDOM高度
    height: {
      type: String,
      default: '320px'
    },
    // 配置
    // 该参数用于跟默认配置做递归树合并，得到新的默认配置
    option: {
      type: Object,
      default: function () {
        return {}
      }
    },
    seriesData: {
      // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    },
    openData: {
      // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    },
    closeData: {
      // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    },
    highData: {
      // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    },
    lowData: {
      // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    },
    vwapData: {
      // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    },
    pointData: {
      type: Array,
      default: function () {
        return []
      }
    },
    ma5Data: {
      type: Array,
      default: function () {
        return []
      }
    },
    ma10Data: {
      type: Array,
      default: function () {
        return []
      }
    },
    ma20Data: {
      type: Array,
      default: function () {
        return []
      }
    },
    ma30Data: {
      type: Array,
      default: function () {
        return []
      }
    },
    monitor: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  computed: {
    comp_option() {
      let obj = {
        tooltip: {
          trigger: 'axis',
          enterable: true,
          triggerOn: "mousemove",
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1
            }
          },
          formatter: function (params) {
            //修改鼠标划过显示为中文
            //开盘收盘最低最高数据汇总
            console.log(params)
            let currentItemData = params[0].data.value;
            let text = ''
            let currentItemText = params[0].data.text;
            if (currentItemText !== null) {
              for (let index in currentItemText) {
                text += currentItemText[index].label + ":" + currentItemText[index].value + '<br>'
              }
            }
            text += '开盘:' + currentItemData[1] + '<br>' +
              '收盘:' + currentItemData[2] + '<br>' +
              '最低:' + currentItemData[3] + '<br>' +
              '最高:' + currentItemData[4] + '<br>'
            if (currentItemData[5] != null) {
              text += '均价:' + currentItemData[5] + '<br>'
            }
            // '均价:' + currentItemData[5] + '<br>'
            // if (params.length > 1) {
            //   text += 'MA5日均线:' + params[1].data + '<br>' +
            //     'MA10日均线:' + params[1].data + '<br>' +
            //     'MA20日均线:' + params[1].data + '<br>' +
            //     'MA30日均线:' + params[1].data
            // }
            // if (this.editable) {
            //   return params[0].name + '<el-button icon="el-icon-edit"></el-button>' + '<br>' + text
            // } else {
            // }
            return params[0].name + '<br>' + text
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          scale: true,
          boundaryGap: true,
          axisLine: {onZero: false, show: true},
          splitLine: {show: false},
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax'
        },
        yAxis: {
          scale: true,
          axisLine: {
            show: true
          },
          splitArea: {
            show: true
          }
        },
        grid: { // 图表离面板的距离
          top: '24px',
          left: '12px',
          right: '50px',
          bottom: '0',
          containLabel: true,
        },
        legend: {
          show: true,
          top: '40px',
          right: '20px',
          orient: 'vertical',
          data: ['日K', '开盘价', '收盘价', '最高价', '最低价', '均价', 'MA5', 'MA10', 'MA20', 'MA30']
        },
      }
      this.mergeOption(obj, this.option)
      return obj
    },
    comp_data() {
      let serieData = [{
        name: '日K',
        type: 'candlestick',
        barWidth: '15',
        grid: {
          left: '20px',
          right: '20px',
        },
        data: this.seriesData,
        itemStyle: {
          color: '#ec0000',
          color0: '#00da3c',
          borderColor: '#8A0000',
          borderColor0: '#008F28'
        },
        markPoint: {
          label: {
            formatter: function (param) {
              return param != null ? param.name : '';
            }
          },
          data: this.pointData,
          tooltip: {
            formatter: function (param) {
              return param.name + '<br>' + (param.data.coord || '');
            }
          }
        }
      }, {
        name: '开盘价',
        type: 'line',
        data: this.openData,
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      }, {
        name: '收盘价',
        type: 'line',
        data: this.closeData,
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      }, {
        name: '最高价',
        type: 'line',
        data: this.highData,
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      }, {
        name: '最低价',
        type: 'line',
        data: this.lowData,
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      }, {
        name: '均价',
        type: 'line',
        data: this.vwapData,
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
        // }, {
        //   name: 'MA5',
        //   type: 'line',
        //   data: this.ma5Data,
        //   smooth: true,
        //   lineStyle: {
        //     opacity: 0.5
        //   }
        // }, {
        //   name: 'MA10',
        //   type: 'line',
        //   data: this.ma10Data,
        //   smooth: true,
        //   lineStyle: {
        //     opacity: 0.5
        //   }
        // }, {
        //   name: 'MA20',
        //   type: 'line',
        //   data: this.ma20Data,
        //   smooth: true,
        //   lineStyle: {
        //     opacity: 0.5
        //   }
        // }, {
        //   name: 'MA30',
        //   type: 'line',
        //   data: this.ma30Data,
        //   smooth: true,
        //   lineStyle: {
        //     opacity: 0.5
        //   }
      }]
      return serieData
    }
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.setOption(val)
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    // 绘制图表
    this.init()
    this.setOption(this.seriesData)
    if (this.monitor) {
      this.chart.on('click', (params) => {
        console.log(params)
        this.$emit('click', params)
      })
    }
  },
  methods: {
    init(beforeFn = function () {
    }) {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart)
      }
      let finalOptions = beforeFn.call(this, this.comp_option) || this.comp_option
      this.chart.setOption(finalOptions)
    },
    setOption(data) {
      if (!data) return
      let options = {}
      if (this.merge) {
        options = {
          series: serieData
        }
      } else {
        options = {
          ...this.comp_option,
          series: this.comp_data
        }
      }
      options.series[0].markPoint.data = this.pointData
      this.chart.setOption(options, !this.merge)
    },
    mergeOption(defOption, newOption) {
      for (const [k, v] of Object.entries(newOption)) {
        if (Reflect.has(defOption, k)) {
          let type = Object.prototype.toString.call(v)
          type = type.split(' ')[1].split(']')[0]
          switch (type) {
            case 'Object':
              let defType = Object.prototype.toString.call(defOption[k])
              defType = defType.split(' ')[1].split(']')[0]
              if (defType === 'Object') {
                this.mergeOption(defOption[k], v)
              } else {
                defOption[k] = v
              }
              break
            default:
              defOption[k] = v
              break
          }
        } else {
          defOption[k] = v
        }
      }
    },
    handleCalculateMA(dayCount, data) {
      const result = [];
      let i = 0, len = data.length;
      for (; i < len; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += +data[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    },
  }
}
</script>

<style lang="less">

</style>
